<template>
  <div <div style="border-bottom: 1px solid  #dcdee2">
                <div class="navs-header">
                    <div style="padding-left: 6px">
                        <span>名称：</span>
                        <Input v-model="searchInfo" search placeholder="请输入姓名搜索...." @on-change="handleSearch1"  style="width: 186px"/>
                    </div>
                </div>
            </div>
            <my-tree :data="data5" :rend="renderContent"></my-tree> class="wrapper">

  </div>
</template>

<script>
    import myTree from  "@/views/my-components/private/components/my-tree";
export default {
name:'ui-design-tree',
components:{myTree},
  props:{},
  data(){
    return {
               searchInfo:'',
                data5: [
                    {
                        title: '行政部门',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-add',
                                            type: 'primary'
                                        }),
                                        style: {
                                            width: '64px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: [
                            {
                                title: '人事部',
                                expand: true,
                                children: [
                                    {
                                        title: '人事-1部',
                                        expand: true
                                    },
                                    {
                                        title: '人事-2部',
                                        expand: true
                                    }
                                ]
                            },
                            {
                                title: '财务部',
                                expand: true,
                                children: [
                                    {
                                        title: '财务-1部',
                                        expand: true
                                    },
                                    {
                                        title: '财务2部',
                                        expand: true
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        title: '业务部门',
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-add',
                                            type: 'primary'
                                        }),
                                        style: {
                                            width: '64px'
                                        },
                                        on: {
                                            click: () => { this.append(data) }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: [
                            {
                                title: '技术部',
                                expand: true,
                                children: [
                                    {
                                        title: '久其金建-1部',
                                        expand: true
                                    },
                                    {
                                        title: '久其金建-2部',
                                        expand: true
                                    }
                                ]
                            },
                            {
                                title: '市场销售部',
                                expand: true,
                                children: [
                                    {
                                        title: '市场销售-1部',
                                        expand: true
                                    },
                                    {
                                        title: '市场销售-2部',
                                        expand: true
                                    }
                                ]
                            }
                        ]
                    }
                ],
    }
  },
  watch:{},
  computed:{},
  methods:{},
  created(){},
  mounted(){}
}
</script>
<style lang="less" scoped>
.wrapper{width:100%;}
    .navs-header{
    display: flex;
    align-items: center;
    height:40px;
    width: 100%;
    button{
        margin-left: 10px;
    }
}
</style>